<template>
  <el-main style="padding: 0px; margin: 0px">
    <el-row :gutter="20" justify="space-between">
      <el-col
        v-for="(item, index) in infoCardList"
        :key="index"
        :lg="6"
      >
        <el-card>
          <div class="wrapper" id="target">
            <el-icon :size="100" class="icon" :style="{color: item.color}">
              <component :is="item.icon" />
            </el-icon>
            <div class="content" >
              <p class="title" style="margin: 0">{{item.title}}</p>
              <CountUpV3 :end="item.value" useGroup/>
            </div>
          </div>
          <div style="width:90%; height:160px; margin:0 auto" :id="item.id" />
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script setup>
import {onMounted, defineAsyncComponent} from 'vue'
import {infoCardList} from '@/plugins/mock'
import {renderIncome, renderCustomers, renderRate, renderSoldOut} from '../render/renderCard'

const CountUpV3 = defineAsyncComponent(() => import('@/components/Statistic/count'))

onMounted(() => {
  renderRate('rate')
  renderIncome('area')
  renderSoldOut('total')
  renderCustomers('customer')
})
</script>

<style scoped lang="scss">
.row-container {
  @include fj(); 
  align-items: center; 
}
.container {
  @include borderRadius(5px);
  padding: 20px 0;
  cursor: pointer;
  margin-bottom: 20px;
  background-color: $main-bg-p;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  &:hover {
    box-shadow: 0 0 18px 0 rgba(24, 144, 255, 0.3);
  }
  .wrapper{
    @include fl(); 
    margin-bottom: 10px;
    .icon {
      margin: 0 20px;
      font-size: 54px;
    }
    .content{
      @include fj(); 
      flex-direction: column;
      .title {
        @include sc($font-size-medium-x, rgba(0, 0, 0, 0.45));
        margin-top: 8px;
        margin-bottom: 16px;
      }
      .value {
        @include sc($font-size-large-l, $color-text-s);
      }
    }
  }
}

.col-container:first-child{
  padding-left: 0 !important;
}
.col-container:last-child{
  padding-right: 0 !important;
}
.list-enter-active,
.list-leave-active{
  transition: transform 1s ease, opacity 1s ease;
}
.list-enter-from {
  opacity: 0;
  transform: translateY(50%);
}
.list-leave-to {
  opacity: 0;
  transform: translateY(-50%);
}
</style>
